<template>
	<div>
		<h2>生命周期 {{ count }}</h2>
		<button @click="count++">点击加1</button>
	</div>
</template>
<script setup lang="ts">
import {
	ref,
	onBeforeMount,
	onMounted,
	onBeforeUpdate,
	onUpdated,
	onBeforeUnmount,
	onUnmounted,
	onActivated,
	onDeactivated
} from "vue";

const count = ref(0);

onBeforeMount(() => {
	console.log("onBeforeMount");
});

onMounted(() => {
	throw new Error("ghhhhh");
});

onActivated(() => {
	console.log("onActivated");
});

onBeforeUpdate(() => {
	console.log("onBeforeUpdate");
});

onUpdated(() => {
	console.log("onUpdated");
});

onBeforeUnmount(() => {
	console.log("onBeforeUnmount");
});

onUnmounted(() => {
	console.log("onUnmounted");
});

onDeactivated(() => {
	// 如果是缓存组件的话，onUnmounted 就不会调用
	console.log("onDeactivated");
});
</script>
